<script setup lang="ts">
import myTitle from "@/components/myTitle/myTitle.vue";
const title = ref("选择科室");

import { onMounted, ref } from "vue";
import { getRect, isArray } from "wot-design-uni/components/common/util";
const active = ref<number>(0);
const scrollTop = ref<number>(0);
const itemScrollTop = ref<number[]>([]);

const subCategories = new Array(4).fill({ label: "这是描述这是描述" }, 0, 24);
const categories = ref([
  {
    label: "一级科室",
    title: "标题一",
    items: [
      {
        label: "二级科室1",
      },
      {
        label: "二级科室2",
      },
      {
        label: "二级科室3",
      },
      {
        label: "二级科室4",
      },
    ],
  },
  {
    label: "内科",
    title: "标题二",
    items: subCategories,
  },
  {
    label: "外科",
    title: "标题三",
    items: subCategories.slice(0, 18),
  },
  {
    label: "妇产科",
    title: "标题四",
    items: subCategories.slice(0, 21),
  },
  {
    label: "生殖医学中心",
    title: "标题五",
    items: subCategories,
  },
  {
    label: "小儿内科",
    title: "标题六",
    items: subCategories.slice(0, 18),
  },
  {
    label: "五官科",
    title: "标题七",
    items: subCategories,
  },
  {
    label: "皮肤性病科",
    title: "标题四",
    items: subCategories.slice(0, 21),
  },
  {
    label: "护理门诊",
    title: "标题五",
    items: subCategories,
  },
  {
    label: "专病专症门诊",
    title: "标题六",
    items: subCategories.slice(0, 18),
  },
  {
    label: "特需医疗部",
    title: "标题七",
    items: subCategories,
  },
  {
    label: "其他",
    title: "标题六",
    items: subCategories.slice(0, 18),
  },
  {
    label: "其他",
    title: "标题七",
    items: subCategories,
  },
]);

onMounted(() => {
  getRect(".category", true).then((rects: any) => {
    if (isArray(rects)) {
      itemScrollTop.value = rects.map((item: any) => item.top || 0);
      scrollTop.value = rects[active.value].top || 0;
    }
  });
});

// function handleChange({ value }: { value: any }) {
//     active.value = value
//     scrollTop.value = itemScrollTop.value[value]
// }
function handleChange({ value }: { value: any }) {
  active.value = value;
  scrollTop.value = -1;
  nextTick(() => {
    scrollTop.value = 0;
  });
}
</script>

<template>
  <!-- 选择科室 -->
  <div class="" style="height: 100vh; overflow-y: hidden">
    <view>
      <myTitle :title="title" style="background-color: #fff" :if-text="true" />
    </view>
    <view class="wraper">
      <wd-sidebar v-model="active" @change="handleChange">
        <wd-sidebar-item
          v-for="(item, index) in categories"
          :key="index"
          :value="index"
          :label="item.label"
        />
      </wd-sidebar>
      <view class="content" :style="`transform: translateY(-${active * 100}%)`">
        <scroll-view
          v-for="(item, index) in categories"
          :key="index"
          class="category"
          scroll-y
          scroll-with-animation
          :show-scrollbar="false"
          :scroll-top="scrollTop"
          :throttle="false"
        >
          <wd-cell-group border>
            <wd-cell
              v-for="(cell, index) in item.items"
              :key="index"
              :title="cell.title"
              :label="cell.label"
            >
              <!-- <wd-icon name="github-filled" size="24px"></wd-icon> -->
            </wd-cell>
          </wd-cell-group>
        </scroll-view>
      </view>
    </view>
  </div>
</template>

<style lang="scss" scoped>
.wraper {
  display: flex;
  height: calc(100vh - var(--window-top));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}

.content {
  flex: 1;
  background: #fff;
  transition: transform 0.3s ease;
}

.category {
  box-sizing: border-box;
  height: 100%;
}

.wd-sidebar-item--active[data-v-9c9938af] {
  color: #42cdb4;
}

.wd-sidebar-item[data-v-9c9938af] {
  font-size: 25rpx;
}

.wd-sidebar-item--active[data-v-9c9938af]::before {
  background: #fff;
}

:deep() {
  .wd-cell__label[data-v-a65b3963] {
    color: #000 !important;
  }
}
</style>
